<template>
    <div class="kefuyufankui">
      <div class="tou">
        <router-link to="/person">
          <img src="../../assets/个人中心/1个人中心/jiantou.png"/>
        </router-link>
        <p>客服与反馈</p>
        <span @click="">反馈</span>
      </div>
      <div class="tixing">
        <p><span class="spa1">安全提醒:&nbsp;</span>阿拉灯不会以付款异常、系统升级等原因让顾客进
          行银行账户修改。请勿相信陌生电话、短信内容，阿拉灯提醒您
          谨防网络诈骗！&nbsp;<span class="spa2">查看详情》</span></p>
      </div>
      <div class="lianxi"><p>联系客服</p></div>
      <div class="job">
        <span>工作时间:&nbsp;</span>
        <span style="color: #e75f63;">9:00—24:00</span>
      </div>
      <ul class="dingdan">
        <li @click="">
          <img class="img3" src="../../assets/个人中心/2客服与反馈/订单咨询.png"/>
          <p>订单咨询</p>
          <span>订单修改、取消订单、订单查询</span>
          <img class="img4" src="../../assets/个人中心/1个人中心/右箭头.png"/>
        </li>
        <li @click="">
          <img class="img3" src="../../assets/个人中心/2客服与反馈/物流咨询.png"/>
          <p>物流咨询</p>
          <span>物流信息查询、催物流</span>
          <img class="img4" src="../../assets/个人中心/1个人中心/右箭头.png"/>
        </li>
        <li @click="">
          <img class="img3" src="../../assets/个人中心/2客服与反馈/售后咨询.png"/>
          <p>售后咨询</p>
          <span>商品质疑、退换货、投诉与建议</span>
          <img class="img4" src="../../assets/个人中心/1个人中心/右箭头.png"/>
        </li>
        <li>
          <img class="img3" src="../../assets/个人中心/2客服与反馈/其他咨询.png"/>
          <p class="qita">其他咨询</p>
          <img class="img4" src="../../assets/个人中心/1个人中心/右箭头.png"/>
        </li>
      </ul>
      <div class="lianxi lianxi2"><p>常见问题</p></div>
      <ul class="wenti">
        <li>
          <p>食品安全科普</p>
          <img class="img4" src="../../assets/个人中心/1个人中心/右箭头.png"/>
        </li>
        <li>
          <p>为什么还没发货？</p>
          <img class="img4" src="../../assets/个人中心/1个人中心/右箭头.png"/>
        </li>
        <li>
          <p>发货了为什么还没收到？</p>
          <img class="img4" src="../../assets/个人中心/1个人中心/右箭头.png"/>
        </li>
        <li>
          <p>其他问题</p>
          <img class="img4" src="../../assets/个人中心/1个人中心/右箭头.png"/>
        </li>
      </ul>
    </div>
</template>

<script>

</script>

<style>
  .kefuyufankui{
    width: 100%;
  }
  .kefuyufankui .tou{
    width: 100%;
    height: 2.666rem;
    background: #e53e42;
    position: fixed;
    top: 0;
    z-index: 1;
  }
  .kefuyufankui .tou img{
    position: absolute;
    width: 0.638rem;
    height: 1.055rem;
    bottom:0.833rem ;
    left: 1rem;
  }
  .kefuyufankui .tou p{
    position: absolute;
    bottom:0.833rem;
    left: 5.8rem;
    height: 1rem;
    font-size: 0.888rem;
    line-height: 1rem;
    letter-spacing: 0;
    color: #ffffff;
  }
  .kefuyufankui .tou span{
    position: absolute;
    bottom:0.733rem;
    right: 0.50rem;
    width: 2rem;
    font-size: 0.8rem;
    line-height: 1rem;
    letter-spacing: 0;
    color: #ffffff;
  }
  .kefuyufankui .tixing{
    width: 100%;
    height: 3.611rem;
    background: #f9d3d4;
    margin-top: 2.66rem;
  }

  .kefuyufankui .tixing p{
    font-size: 0.6rem;
  }
  .kefuyufankui .tixing .spa1{
    font-size: 0.833rem;
    color: red;
  }
  .kefuyufankui .tixing .spn2{
    font-size: 0.833rem;
  }
  .kefuyufankui .lianxi{
    height: 0.5rem;
    float: left;
    margin-top: 0.5rem;
    margin-left: 0.555rem;
  }
  .kefuyufankui .lianxi p{
    height: 0.75rem;
    font-size: 0.7rem;
    line-height: 0.861rem;
    letter-spacing: 0;
  }
  .kefuyufankui .job{
    margin-top: 0.38rem;
    height: 0.75rem;
    font-size: 0.7rem;
    float: right;
    margin-right: 0.555rem;
  }
  .kefuyufankui .dingdan{
    float: left;
    width: 93%;
    margin-left: 0.555rem;
    height: 18.888rem;
  }
  .kefuyufankui .dingdan li{
    width: 100%;
    height: 3.833rem;
    border: 1px solid #CCCCCC;
    margin-top: 0.555rem;
    background: white;
    position: relative;
  }
  .kefuyufankui .dingdan li .img3{
    position: absolute;
    width: 2.222rem;
    height: 2.222rem;
    top: 0.833rem;
    left: 0.555rem;
  }
  .kefuyufankui .dingdan p{
    top: 0.833rem;
    left: 3.555rem;
    position: absolute;
    height: 1rem;
    font-weight: 500;
    font-size: 0.8rem;
    line-height: 0.944rem;
    letter-spacing: 0;
    color: #808080;
  }
  .kefuyufankui .dingdan span{
    position: absolute;
    bottom: 0.833rem;
    left: 3.555rem;
    height: 0.638rem;
    font-size: 0.555rem;
    line-height: 0.861rem;
    letter-spacing: 0;
    color: #808080;
  }
  .kefuyufankui .dingdan .img4{
    position: absolute;
    width: 0.388rem;
    height: 0.666rem;
    top:1.611rem;
    right: 0.555rem;
  }
  .kefuyufankui .dingdan li .qita{
    top: 1.388rem;
  }
  .kefuyufankui .lianxi2{
    margin-top: -0.1rem;
    margin-left: 0.6rem;
  }
  .kefuyufankui .wenti{
    width: 100%;
    height: 6.777rem;
    float: left;
    margin-top: 0.7rem;
    margin-bottom: 2.6rem;
  }
  .kefuyufankui .wenti li{
    width: 100%;
    height: 1.666rem;
    background: white;
    border-bottom:1px solid #CCCCCC;
    position: relative;
  }
  .kefuyufankui .wenti li p{
    top: 0.472rem;
    left: 0.555rem;
    position: absolute;
    height: 0.722rem;
    font-size: 0.6rem;
    line-height: 0.861rem;
    letter-spacing: 0;
    color: #4d4d4d;
    margin-left: 0.1rem;
  }
  .kefuyufankui .wenti li img{
    width: 0.388rem;
    height: 0.666rem;
    position: absolute;
    top: 0.472rem;
    right: 0.555rem;
  }



</style>
